{% extends "layout.html" %}
{% block content %}
    <h1>Finished</h1>
    <p>Here is the result of the matching:</p>
    <div class="content-section">
        <div class="row">
            <video width="100%" height="100%" controls>
                <source src="{{'static/results/' + result}}" type="video/mp4">
                Your browser does not support the video tag.
            </video>
        </div>
        <div class="row" style="padding: 10px 20px 0px 20px">
            <a class="btn btn-outline-primary" href="{{ url_for('download_result', filename=result) }}" style="width: 100%">Download result</a>
        </div>
    </div>
    {% for file in files %}
        <p>The {{file.number}}song used is called "{{file.title}}" by {{file.artist}}:</p>
        <div class="content-section">
            <form class="form-inline" style="padding-left: 0px; margin-right:0px">
                <audio class="col-12 col-md-7 col-lg-4" width="100%" height="100%" controls>
                    <source src="{{'static/datasets/audio/' + file.name + '.mp3'}}" type="audio/mp3">
                    Your browser does not support the audio tag.
                </audio>
                <a class="btn btn-outline-primary col-12 col-md-5 col-lg-8" href="{{ url_for('download_audio', filename=file.name+'.mp3') }}" style="width: 100%">Download song</a>
            </form>
        </div>
    {% endfor %}
{% endblock content %}
